<!-- #F5CF46 -->
<!-- #F1F1F1 -->
<template>
    <div class="container">
        <div class="home-header header-height">
            <img :src="HomeTitle" alt="">
        </div>
        <div class="home-content">
            <div class="add-title">
                报名流程引导
            </div>
            <div class="master-container">
                <div class="master-title">
                    <img style="width: 16px;height: 16px; margin-right: 5px;" :src="smallIcon" alt="">
                    <div style="font-size: 16px;color: #1B1B1B;">报名信息填写</div>
                </div>
                <el-steps style="margin-top: 20px;margin-bottom: 20px;" :active="stepActive" process-status="finish"
                    align-center>
                    <el-step title="报名信息" />
                    <el-step title="基本信息" />
                    <el-step title="教育情况" />
                    <el-step title="工作情况" />
                    <el-step title="确认信息" />
                </el-steps>
                <AddBase v-show="stepActive === 0"></AddBase>
                <BaseFrom ref="baseFromRef" :ruleForm=params v-show="stepActive === 1"></BaseFrom>
                <TeachFrom ref="teachFromRef" :ruleForm=params v-show="stepActive === 2"></TeachFrom>
                <WorkFrom ref="workFromRef" :ruleForm=params v-show="stepActive === 3"></WorkFrom>
                <AllInfo :info="params" v-show="stepActive === 4"></AllInfo>
            </div>
            <div style="margin-bottom: 40px;">
                <el-button v-show="stepActive !== 0" @click="handleUpStep">上一步</el-button>
                <el-button v-show="stepActive !== 4" type="primary" @click="handleNextStep">下一步</el-button>
                <el-button v-show="stepActive === 4" type="primary" @click="handleSubmit">提交</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import HomeTitle from '@/assets/images/home-title.png'
import smallIcon from '@/assets/images/small-icon.png'
import AddBase from './components/addBase.vue'
import BaseFrom from './components/baseFrom.vue'
import TeachFrom from './components/teachFrom.vue'
import WorkFrom from './components/workFrom.vue'
import AllInfo from './components/allInfo.vue'
import { queryInsertApplication } from '@/api/home.js'
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance();
const params = reactive({})
const baseFromRef = ref()
const teachFromRef = ref()
const workFromRef = ref()
const stepActive = ref(0)
//  
const handleUpStep = () => {
    stepActive.value -= 1
}
const handleNextStep = () => {
    if (stepActive.value === 1) {
        baseFromRef.value.submitForm((value) => {
            if (value) {
                stepActive.value += 1
            }
        })
    } else if (stepActive.value === 2) {
        teachFromRef.value.submitForm((value) => {
            if (value) {
                stepActive.value += 1
            }
        })
    } else {
        stepActive.value += 1
    }

}
const handleSubmit = async () => {
    const pp = JSON.parse(JSON.stringify(params))
    pp.courseId = route.query.courseId
    console.log("🚀 ~ file: index.vue:83 ~ handleSubmit ~ pp:", pp)
    const res = await queryInsertApplication(pp)
    if (res.code === 200) {
        ElMessage.success('报名成功')
        router.replace({ path: "/" })
    }
}

</script>
<style lang="scss" scoped>
@import './index.scss'
</style>